<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Attendance</title>
    <link rel="stylesheet" href="index.css">
</head>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<body>

<div id="header">
    <span>订单信息统计系统</span>
</div>

<div style="display: flex">
    <div class="container" id="container1"></div>
    <div class="container" id="container2"></div>
    <div class="container" id="container4"></div>
</div>

<div style="display: flex">
    <div class="container_bottom" id="container3">
    </div>
    <div class="container_bottom" id="container5">
        <form id="myForm">
            <input id="inputField" type="text" placeholder="请输入类别：">
            <button type="submit">提交</button>
        </form>

        <div id="CF2">
        </div>
    </div>
</div>

<script>


    $(document).ready(function () {
        $.ajax({
            url: "/table1",
            type: "GET",
            dataType: "json",
            success: function (data) {
                let chartDom = document.getElementById("container1");
                let myChart = echarts.init(chartDom);
                let option;
                option = {
                    title: {
                        text: '学生出勤和缺勤数量总和',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                    },
                    series: [
                        {
                            name: '总和',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: data[0], name: '出勤人数'},
                                {value: data[1], name: '缺勤人数'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        })
    })
    $(document).ready(function () {
        $.ajax({
            url: "/table2",
            type: "GET",
            dataType: "json",
            success: function (data) {
                let chartDom = document.getElementById("container2");
                let myChart = echarts.init(chartDom);
                let option;
                option = {
                    title: {
                        text: '出勤的top5名单'
                    },
                    xAxis: {
                        type: 'category',
                        data: data["name"]
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data["A"],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 次';
                                }
                            },
                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        })
    })
    $(document).ready(function () {
        $.ajax({
            url: "/table3",
            type: "GET",
            dataType: "json",
            success: function (data) {
                let chartDom = document.getElementById("container4");
                let myChart = echarts.init(chartDom);
                let option;
                option = {
                    title: {
                        text: '缺勤的top3名单'
                    },
                    xAxis: {
                        type: 'category',
                        data: data["name"]
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data["L"],
                            type: 'line',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 次';
                                }
                            },
                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        })
    })
    $(document).ready(function () {
        $.ajax({
            url: "/CF1",
            type: "GET",
            dataType: "json",
            success: function (data) {
                let chartDom = document.getElementById("container3");
                let myChart = echarts.init(chartDom);
                let option;
                option = {
                    title: {
                        text: '个性化推荐缺勤前6'
                    },
                    xAxis: {
                        type: 'category',
                        data: data["name1"]
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data["related"],
                            type: 'line'

                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        })
    })
    $(document).ready(function () {
        $('#myForm').submit(function (event) {
            event.preventDefault(); // 阻止默认表单提交行为

            // 获取表单数据
            let name1 = $("#inputField").val()
            // 发送 AJAX 请求
            $.ajax({
                url: '/CF2', // 后台处理请求的URL
                type: 'GET',
                dataType:"json",
                data: {
                    name1: name1
                },
                success: function (response) {
                    let x = $('#CF2')
                    x.empty();
                    //创建表格
                    let table = $('<table></table>');
                    let thead = $('<thead><tr><th>Name1</th><th>Name2</th><th>Related</th></tr></thead>');
                    let tbody = $('<tbody></tbody>');

                    for (let i = 0; i < 3; i++) {
                        let row = $('<tr></tr>');
                        row.append('<td>' + response["name1"][i] + '</td>');
                        row.append('<td>' + response["name2"][i] + '</td>');
                        row.append('<td>' + response["related"][i] + '</td>');
                        tbody.append(row);
                    }

                    table.append(thead);
                    table.append(tbody);

                    x.append(table);

                },
                error: function (error) {
                    console.log("Error:", error);
                }
            });
        });
    });

</script>
</body>
</html>